<template>
  <div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form label-width="180px">
          <el-row>
              <el-form-item label="分公司">
                <span>{{detailData.branchName}}</span>
              </el-form-item>
              <el-form-item label="所属部门">
                <span>{{detailData.departName}}</span>
              </el-form-item>
              <el-form-item label="客资类型">
                <span>{{detailData.customerName}}</span>
              </el-form-item>
              <el-form-item label="客户标签">
                <span>{{detailData.limit_usertypetag_name}}</span>
              </el-form-item>
              <el-form-item label="主广告语">
                <span>{{detailData.ad_words}}</span>
              </el-form-item>
              <el-form-item label="副广告语">
                <span>{{detailData.sub_ad_words}}</span>
              </el-form-item>
              <el-form-item label="广告图片">
                <img :src="imgHost + '/' + detailData.ad_pic" style="width:160px;height:100px;margin:5px 0" alt="">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form label-width="180px">
          <el-row>
              <el-form-item label="活动名称">
                <span>{{detailData.promotion_name}}</span>
              </el-form-item>
              <el-form-item label="副标题">
                <span>{{detailData.sub_promotion_name}}</span>
              </el-form-item>
              <el-form-item label="活动起止时间">
                <span>{{detailData.start_time}}</span> -
                <span>{{detailData.end_time}}</span>
              </el-form-item>
              <el-form-item label="活动类型">
                <span v-if="detailData.limit_type === '1'">阶梯</span>
                <span v-if="detailData.limit_type === '2'">每满元</span>
              </el-form-item>
              <el-form-item v-if="detailData.limit_type === '1'" v-for="(item, index) in detailData.limit_full_reduction">
                满 <span>{{item.condition}}</span> 元,
                减 <span>{{item.reduction}}</span> 元,
                (相当于 {{(((item.condition - item.reduction) / item.condition) * 10).toFixed(1)}} 折)
              </el-form-item>
              <el-form-item v-else>
                满 <span>{{detailData.limit_full_reduction[0].condition}}</span> 元,
                减 <span>{{detailData.limit_full_reduction[0].reduction}}</span> 元,
                (相当于 {{(((detailData.limit_full_reduction[0].condition - detailData.limit_full_reduction[0].reduction) / detailData.limit_full_reduction[0].condition) * 10).toFixed(1)}} 折)
              </el-form-item>
              <!--<el-form-item v-if="detailData.limit_type === '1'" label="用户参与次数">-->
                <!--<span>{{detailData.limit_attend_count}}</span>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="是否含多笔费用">-->
                <!--<span v-if="detailData.sales_cost">否</span>-->
                <!--<span v-else>是</span>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="所属费用：" v-if="detailData.sales_cost">-->
                <!--<el-select v-model="sales_cost" disabled>-->
                  <!--<el-option-->
                    <!--v-for="(item, index) in feiyongList"-->
                    <!--:label="item.promotionName"-->
                    <!--:value="item.id"-->
                    <!--:key="index">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="供应商占比：" v-if="detailData.sales_cost && this.type === true">-->
                <!--<span>{{detailData.sales_ratio}}%</span>-->
              <!--</el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>商品信息</h4>
        <el-table :data="detailData.main_product" border width="100%">
          <el-table-column prop="productid" label="商品ID" align="center" width="90"></el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="saleunit" label="单位" align="center" width="100"></el-table-column>
          <el-table-column prop="salenorm" label="规格" align="center" width="100"></el-table-column>
          <el-table-column prop="saleprice" label="系统售价" align="center" width="100"></el-table-column>
          <el-table-column prop="cgprice" label="最后一次采购价" align="center" width="100"></el-table-column>
          <el-table-column label="促销费用" align="center" width="120">
            <template scope="scope">
              <span v-if="!detailData.sales_cost">{{scope.row.cxName}}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="供货商承担金额" align="center" width="170">
            <template scope="scope">
              <span v-if="!detailData.sales_cost">{{scope.row.providerholdprice}}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <!--<el-table-column-->
            <!--label="操作"-->
            <!--align="center"-->
            <!--width="100" >-->
            <!--<template scope="scope">-->
              <!--<el-button v-if="(status === 5 && scope.row.status === 1) || (status === 6 && scope.row.status === 1)" @click="offline(scope.$index, scope.row, $event)" size="small">下线</el-button>-->
              <!--<el-button v-else size="small">已下线</el-button>-->
            <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px;margin-bottom:80px">
      <div class="form-item">
        <h4>审核信息</h4>
        <el-table :data="this.detailData.checkInfo" border>
          <el-table-column prop="auditor" label="审核人名称" align="center"></el-table-column>
          <el-table-column prop="content" label="任务内容" align="center"></el-table-column>
          <el-table-column prop="resultName" label="审核结果" align="center"></el-table-column>
          <el-table-column prop="opinion" label="审核意见" align="center"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { apiHost } from '../../../../../config/settings.js'
  import { activity } from '../../../../../config/proxy.js'
  export default {
    data () {
      return {
        detailData: [],
        status: '',
        data: '',
        feiyongList: [],
        sales_cost: '',
        type: false
      }
    },
    methods: {
      searchDetail (id) {
        activity.sphd.detail({id: id}, (res) => {
          console.log(res, '详情数据')
          if (res.message === 'ok') {
            res.content.limit_full_reduction = JSON.parse(res.content.limit_full_reduction)
            res.content.limit_full_reduction.forEach((item, index) => {
              item.reduction = Number(item.reduction / 100).toFixed(2)
              item.condition = Number(item.condition / 100).toFixed(2)
            })
            res.content.main_product.forEach((item, index) => {
              item.cgprice = Number(item.cgprice / 100).toFixed(2)
              item.saleprice = Number(item.saleprice / 100).toFixed(2)
              item.providerholdprice = Number(item.providerholdprice / 100).toFixed(2)
            })
            if (res.content.sales_cost) {
//              this.fyQuery(this.data)
//              this.sales_cost = Number(res.content.sales_cost)
              // ------------
//              setTimeout(function () {
//                self.fyChange2(Number(res.content.sales_cost))
//              }, 500)
            }
            this.detailData = res.content
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      },
      offline (index, row, event) {
        const data = {
          promotionId: this.data.promotion_id,
          productId: row.productid
        }
        console.log(data)
        activity.sphd.myj.manjian.offline(data, (res) => {
          if (res.message === 'ok') {
            this.detailData.main_product.splice(index, 1)
          } else {
            this.message('下线失败', 'error')
          }
        })
      }, // 商品下线
      fyQuery (data) {
        activity.cxfy.allList({branchId: data.limit_branch_id, activityType: 1, startTime: data.start_time, endTime: data.end_time}, (res) => {
          console.log(res, '费用列表')
          if (res.message === 'ok') {
            this.feiyongList = res.content
            console.log(this.feiyongList, '费用列表')
            this.feiyongList.forEach((item, index) => {
              if (item.id === Number(data.sales_cost)) {
                if (item.promotionType === 1) {
                  this.type = false
                } else {
                  this.type = true
                }
              }
            })
          }
        })
      } // 查询费用列表
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.data = this.$store.state.tab.uid // row
      console.log(this.data, '2')
      this.status = this.$store.state.tab.uid.status
      this.searchDetail(this.$store.state.tab.uid.id)
    }
  }
</script>

